<template>
  <input
    type="checkbox"
    name=""
    id=""
    v-model="allClick"
    @click="isChecked"
  /><span>已完成{{ count }}/全部{{ todo.length }}</span
  ><button class="clearBtn">清除已完成任务</button>
</template>
<script lang='ts'>
import { computed, defineComponent } from "vue";
import { Todo } from "../types/todo";

export default defineComponent({
  setup(props) {
    const count = computed(() => {
      return props.todo.filter((v) => v.isCompleted).length;
    });
    const allClick = computed({
      get() {
        return count.value == props.todo.length;
      },
      set(val) {
        if (val == true) {
          props.todo.forEach((v) => (v.isCompleted = true));
        } else {
          props.todo.forEach((v) => (v.isCompleted = false));
        }
      },
    });

    return {
      count,
      allClick,
    };
  },
  props: {
    todo: {
      type: Array as () => Todo[],
      required: true,
    },
    checkAll: {
      type: Boolean,
    },
  },
});
</script>

<style scoped>
.clearBtn {
  background-color: red;
  border: 0;
  color: aliceblue;
  float: right;
}
</style>